<template>
  <div class="page">
    <Header class="headerBox">
      <template v-slot:header>
        <div class="header_titleView flex" style="margin-left: 27%">
          <div
            class="react-right mr-10"
            v-for="(item, index) in routePath"
            :key="item.name"
            :class="activeInx === item.meta.activeInx ? 'activeBg' : ''"
          >
            <RouterLink
              ref="tag"
              :to="item.path"
              class="tags-view-item text fw-5"
              @click="closeSelectedTag(index)"
            >
              {{ item.meta.title || "" }}
            </RouterLink>
          </div>
        </div>
      </template>
    </Header>
    <section id="main" class="section_content">
      <!-- <transition name="fade-transform" mode="out-in"> -->
      <!-- <RouterView /> -->
      <router-view></router-view>
      <!-- </transition>  -->
    </section>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  onBeforeUnmount,
  watch,
  onMounted,
  reactive,
  ref,
} from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter, RouterLink, RouterView } from "vue-router";
import Header from "@/views/Header/Header.vue";

const defaultProps = reactive({
  children: "children",
  label: "name",
});

const store = useStore();
const activeInx = ref(0);
const site = computed(() => store.state.site); // 当前故障状态
const routePath = ref([]);
const timer = ref<any>(null);
const router = useRouter();
const route = useRoute();
onMounted(() => {
  const routes = router.options.routes;
  activeInx.value = route?.meta?.activeInx || 0;
  routePath.value = routes?.[0].children;
  console.log(routePath, router.options.routes);
});
watch(
  () => route,
  (newPath, oldPath) => {
    console.log("路由变化：", route, route?.meta?.activeInx, newPath, oldPath);
    activeInx.value = route?.meta?.activeInx || 0;
  },
  { deep: true }
);
// onMounted(async () => {
// window.parent.postMessage('token', '*');
// // console.log('window======================')
// window.addEventListener('message', messageEvent => {
// 	// console.log(messageEvent,'messageEvent---------------')
// 	if (messageEvent.source != window.parent.window.parent) return;
// 	//    console.log('子收到messageEvent：',messageEvent);
// 	clearInterval(timer.value)
// 	timer.value = null
// 	if (messageEvent.data.id = 'token' && messageEvent.data.success) {
// 		let testToken = messageEvent.data.value
// 		localStorage.setItem('token', testToken)
// 		// console.log(11111)
// 		timer.value = !timer.value && setInterval(() => {
// 			store.commit('setRefresh')
// 		}, 3000)
// 	}
// 	// console.log('儿子收到vue的数据：', messageEvent.data);
// })
// timer.value = !timer.value && setInterval(() => {
// 	store.commit('setRefresh')
// }, 30000)
// });

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
const closeSelectedTag = (inx) => {
  console.log(1212123, inx);

  activeInx.value = inx;
};
</script>

<style lang="scss" scoped>
.page {
  width: 100vw;
  min-width: 1150px;
  overflow: auto;

  .headerBox {
    .react-right {
      font-size: 16px;
      // border-radius: 4px;
      text-align: center;
      padding: 10px 12px 14px 3px;
      // background-color: #e5e5e5;
      color: #000;
      border-bottom: 2px solid transparent;
      position: relative; /* 相对定位 */
      margin-right: 25px; /* 右边距，用于留出小圆点的空间 */
    }
    .react-right::after {
      content: ""; /* 伪元素需要content属性 */
      width: 5px; /* 小圆点宽度 */
      height: 5px; /* 小圆点高度 */
      background-color: #555; /* 小圆点颜色 */
      border-radius: 50%; /* 小圆点圆形 */
      position: absolute; /* 绝对定位 */
      top: 46%; /* 定位到盒子的垂直中间 */
      right: 2px; /* 小圆点右侧距离盒子右边缘的距离 */
      transform: translateY(-50%); /* 垂直居中 */
    }
    .activeBg {
      // background-color: #0c79dfcb !important;
      // box-shadow: #00c2f2 1px 1px 8px 3px inset;
      // color: #fff !important;
      border-color: #483c68;
      color: #483c68;
      font-weight: 700;
    }
  }
  .section_content {
    // padding-top: 78px;
  }
}

#main {
  display: flex;
  justify-content: space-evenly;

  .contentPannel {
    flex: 5;
  }

  .leftPannel {
    flex: 3;
  }

  .rightPannel {
    flex: 3;
  }
}
</style>
